<template>
    <div class="tags">
        <div class="tags-header">
            <div class="tags-header-title">
                关注
            </div>
            <div class="tags-sort">
                <router-link :to="{path:'/user/123/likes'}" class="tags-type">关注的用户</router-link>
                <router-link :to="{path:'/user/123/likes'}" class="tags-type active">关注者</router-link>
            </div>
        </div>
        <div>
            <ul class="tags-list">
                <li class="tag-item">
                    <div class="tag">
                        <router-link :to="{path:'/user/123/tags'}" class="tag-link">

                        </router-link>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Tags"
    }
    //href="/user/158759012289208/following"
    //href="/user/158759012289208/followers"
</script>

<style scoped>
    .tags-sort .tags-type.active{
        color:#000
    }
    .tags .tags-header{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 28px;
        height: 50px;
        white-space: nowrap;
        border-bottom: 2px solid rgba(230,230,231,.5);
        background-color: #fff;
    }
    .tags-header .tags-header-title{
        font-size: 15px;
        font-weight: 600;
        color: #000;
    }
    .tags-header .tags-sort{
        margin-left:auto
    }
    .tags-sort .tags-type{
        position: relative;
        padding: 12px 0;
        font-size: 14px;
        color: #72777b;
    }
    .tags-sort .tags-type:not(:last-child) {
        margin-right: 24px;
    }
    .tags-sort .tags-type:not(:last-child)::after{
        content:"";
        position:absolute;
        display:block;
        top: 50%;
        right: -12px;
        margin-top: -7px;
        width: 1px;
        height: 14px;
        background-color: #b2bac2;
        opacity: .5;
    }
    /*列表部分*/
    .tag-item:not(:last-child) {
        border-bottom: 1px solid rgba(230,230,231,.5);
    }
</style>